<template>
    <div class="file-system-container">
        <div class="navi">
            <div class="path-back" @click="back">
                <img  :src="backSrc1"/>
                <img class="img2" :src="backSrc2"/>
            </div>
            <div class="path-show">
                ✅Root:&nbsp;{{showPath}}
            </div>
            <div class="upload" @click="file_click">
                <input type="file" style="display:none" id="uploader" @change="uploadSelect" multiple="multiple">
                <img  :src="uploadSrc1"/>
                <img class="img2" :src="uploadSrc2"/>
            </div>
            <div class="addFolder" >
                <img :src="addFolder1" >
                <img class="img2" :src="addFolder2" @click="toAddFolder">
                <input type="text" v-model="folderName" @keydown.enter="newFolder" v-show="isAddFolder"/>
            </div>
        </div>
        <div class="path-files">
            <back-folder v-for="item in files" :delMode="delMode" :key="item.Name" :info="item" @changePath="changePath(item)" @delFile="delFile(item)"></back-folder>
        </div>
    </div>
</template>

<script>
import { addFolder, deleteFile, fetchAllThing, uploadFile } from '../Api'
import { error, success } from '../utils/log'
import BackFolder from './back-folder.vue'
export default {
    components: {BackFolder,},
    data(){
        return {
            backSrc1: '',
            backSrc2: '',
            addFolder1: '',
            addFolder2: '',
            uploadSrc: '',
            files: [],
            path: '.',
            folderName: '',
            isAddFolder: false,
            delMode: false,
        }
    },
    computed: {
        showPath() {
            return this.path
        }
    },
    created() {
        this.fileSrc = require('@/assets/book2.png')    
        this.backSrc1 = require('@/assets/back1.png')
        this.backSrc2 = require('@/assets/back2.png')
        this.uploadSrc1 = require('@/assets/upload1.png')
        this.uploadSrc2 = require('@/assets/upload2.png')
        this.addFolder1 = require('@/assets/addFolder1.png')
        this.addFolder2 = require('@/assets/addFolder2.png')
    },
    mounted() {
        this.pathChange()
        var that = this
        document.onkeydown = function(ev) {
            if (ev.key == "Delete") {
                if(!that.delMode)  {
                    that.delMode = true
                    success("进入删除模式,双击删除文件")
                } else {
                    that.delMode = false
                    success("退出删除模式")
                }
            }
        }
    },
    watch: {
        path() {
            // 每次path改变就去请求文件
            this.pathChange()
        }
    },
    methods: {
        pathChange() {
            let params = {}
            params.path = this.path
            fetchAllThing(params).then(res => {
                this.files = JSON.parse(res.data.files)
            }).catch(err => {
                error(err)
            })
        },
        changePath(item) {
            this.path = item.Path
        },
        back() {
            // 返回上一级
            if(this.path == '.') {
                return 
            }
            let s = this.path.split('\\')
            s.pop()
            this.path = s.join('\\')
        },
        file_click() {
            let uploader = document.getElementById('uploader')
            uploader.click()
        },
        uploadSelect() {
            let uploader = document.getElementById('uploader')
            for(let i=0;i<uploader.files.length;i++) {
                let file = uploader.files[i]
                let param = new FormData()
                param.append('path',this.path)
                param.append('name',file.name)
                param.append("file",file)
                uploadFile(param).then(res=>{
                    this.pathChange()
                    success("文件上传成功")
                }).catch(err=>{
                    error(err)
                })
            }
        },
        toAddFolder() {
          this.isAddFolder = !this.isAddFolder
        },
        newFolder() {
            let params = {}
            params.name = this.folderName
            params.path = this.path
            addFolder(params).then(res => {
                this.files.push({Name:this.folderName,Path:this.path+"\\"+this.folderName,IsDir:true})
                this.folderName = ""
                success("新文件夹创建成功")
            }).catch(err => {
                error(err)
            })
            this.isAddFolder = false
        },
        delFile(item) {
            let params = {}
            params.name = item.Name
            params.path = this.path
            deleteFile(params).then(res=>{
                success("文件删除成功")
                this.pathChange()
            }).catch(err=>{
                error(err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .file-system-container {
        .navi {
            .img2 {
                opacity: 0;
            }
            .img2:hover {
                opacity: 1;
            }
            display: flex;
            .path-back {
                transform: translate(0px,-5px);
                margin-left: 80px;
                width: 40px;
                position: relative;
                img {
                    position: absolute;
                    top: 0%;
                    left: 0%;
                    width: 100%;
                }
            }
            .path-back:hover {
                cursor: pointer;
                color: rgb(104, 150, 235);
            }
            .path-show {
                border-radius: 5px;
                border: 1px solid rgba(0, 0, 0,0.5);
                font-family: "weikai";
                margin-left: 50px;
                background: rgba(44, 62, 80,1.0);
                width: 400px;
                height: 30px;
                line-height: 30px;
            }
            .upload {
                margin-left: 20px;
                transform: translate(0px,-5px);
                width: 40px;
                position: relative;
                img {
                    position: absolute;
                    top: 0%;
                    left: 0%;
                    width: 100%;
                }
            }
            .upload:hover {
                cursor: pointer;
            }
            .addFolder {
                width: 40px;
                margin-left: 20px;
                transform: translate(0px,-5px);
                position: relative;
                img {
                    position: absolute;
                    top: 0%;
                    left: 0%;
                    width: 100%;
                }
                input {
                    transform: translate(50px,10px);
                    font-family: 'weikai';
                    font-size: 18px;
                }
            }
            .addFolder:hover {
                cursor: pointer;
            }
        }
        .path-files {
            display: flex;
            flex-wrap: wrap;
        }
    }
</style>